<template>
	<!-- 列设置 -->
	<el-popover ref="popoverRef" :virtual-ref="buttonRef" trigger="click" width="320px" virtual-triggering>
		<draggable
			class="grid-container"
			v-model="value"
			item-key="label"
			animation="300"
			chosenClass="chosen"
			forceFallback="true"
			handle=".draggableHandle"
			@end="end"
		>
			<template #item="{ element }">
				<div class="item-flex" v-if="element.colEnable">
					<div class="tools-l">
						<el-icon class="draggableHandle"><Rank /></el-icon>
						<el-checkbox v-model="element.colShow">{{ element.label }}</el-checkbox>
					</div>

					<div class="tools-r">
						<el-tooltip class="box-item" effect="dark" content="固定到左侧" placement="left">
							<el-icon
								@click="setFixed(element, 'left')"
								:class="{ active: element.fixed === 'left', 'no-drop': !element.colShow }"
								><Download
							/></el-icon>
						</el-tooltip>
						<i class="i-hr"></i>
						<el-tooltip class="box-item" effect="dark" content="固定到右侧" placement="left">
							<el-icon
								@click="setFixed(element, 'right')"
								:class="{ active: element.fixed === 'right', 'no-drop': !element.colShow }"
								><Download
							/></el-icon>
						</el-tooltip>
					</div>
				</div>
			</template>
		</draggable>
	</el-popover>
</template>

<script setup lang="ts" name="PopoverColSetting">
import { ref, unref, computed } from 'vue'
import { ColumnProps, FixedProp } from '@/components/CTable/interface'
import draggable from 'vuedraggable/src/vuedraggable'
const props = defineProps<{ modelValue: Partial<ColumnProps>[]; buttonRef: any }>()
const popoverRef = ref()

// vmodel
const emits = defineEmits(['update:modelValue', 'tableRefDoLayout'])
const value = computed({
	get() {
		return props.modelValue
	},
	set(newVal) {
		emits('update:modelValue', newVal)
	}
})

// 表格列对齐方式（默认为 center）
const setFixed = (item: ColumnProps, val: FixedProp) => {
	if (!(item.colEnable && item.colShow)) return
	item.fixed === val ? (item.fixed = null) : (item.fixed = val)
}
// 打开列设置
const onClickOutside = () => {
	unref(popoverRef).popperRef?.delayHide?.()
}
const end = () => {
	emits('tableRefDoLayout')
}

defineExpose({
	onClickOutside
})
</script>
<style scoped lang="scss">
.item-flex {
	display: flex;
	align-items: center;
	justify-content: space-between;
	.draggableHandle {
		margin-right: 5px;
		cursor: move;
	}
	.tools-l {
		display: flex;
		flex: 1;
		align-items: center;
	}
	.tools-r {
		display: flex;
		align-items: center;
		.el-icon {
			position: relative;
			cursor: pointer;
			&:last-child {
				transform: rotateZ(-90deg);
			}
			&:first-child {
				transform: rotateZ(90deg);
			}
		}
		.i-hr {
			display: flex;
			width: 1px;
			height: 10px;
			margin: 2px 5px;
			background-color: #f0f0f0;
		}
		.active {
			color: var(--el-menu-active-color);
		}
	}
	.no-drop {
		color: var(--el-color-info-light-3) !important;
		cursor: no-drop !important;
	}
}
</style>
